<template>
  <a-modal
    :title="`班级详情 - ${classData.className}`"
    :visible="visible"
    width="800px"
    :footer="null"
    @cancel="handleClose"
  >
    <a-descriptions bordered :column="2">
      <a-descriptions-item label="班级名称">{{ classData.className }}</a-descriptions-item>
      <a-descriptions-item label="班级人数">{{ classData.studentCount }}</a-descriptions-item>
      <a-descriptions-item label="状态">
        <a-tag :color="getStatusColor(classData.status)">
          {{ classData.status }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="日期">{{ classData.date }}</a-descriptions-item>
    </a-descriptions>

    <a-divider orientation="left">课程安排</a-divider>
    
    <a-table
      :columns="scheduleColumns"
      :dataSource="scheduleData"
      :pagination="false"
      size="small"
    >
      <template slot="time" slot-scope="text">
        {{ text }}
      </template>
      <template slot="course" slot-scope="text">
        <a-tag color="blue">{{ text }}</a-tag>
      </template>
      <template slot="teacher" slot-scope="text">
        <a-tag color="purple">{{ text }}</a-tag>
      </template>
    </a-table>

    <a-divider orientation="left">学生名单</a-divider>
    
    <a-table
      :columns="studentColumns"
      :dataSource="studentData"
      :pagination="{ pageSize: 5 }"
      size="small"
    >
      <template slot="studentId" slot-scope="text">
        <a-tag color="cyan">{{ text }}</a-tag>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
const scheduleColumns = [
  {
    title: '时间段',
    dataIndex: 'time',
    key: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '课程名称',
    dataIndex: 'course',
    key: 'course',
    scopedSlots: { customRender: 'course' },
  },
  {
    title: '授课教师',
    dataIndex: 'teacher',
    key: 'teacher',
    scopedSlots: { customRender: 'teacher' },
  },
  {
    title: '教室',
    dataIndex: 'classroom',
    key: 'classroom',
  }
];

const studentColumns = [
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId',
    scopedSlots: { customRender: 'studentId' },
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
    key: 'phone',
  }
];

// 模拟数据
const mockScheduleData = {
  '24级计算机网络技术二班': [
    { time: '08:00-09:40', course: '数据结构', teacher: '王芳', classroom: 'bj007' },
    { time: '10:00-11:40', course: '算法分析', teacher: '李老师', classroom: 'A102' },
    { time: '14:00-15:40', course: '数据库原理', teacher: '王雪', classroom: 'B201' }
  ],
  '数学2003': [
    { time: '08:00-09:40', course: '高等数学（上）	', teacher: '孙老师', classroom: 'D101' },
    { time: '10:00-11:40', course: '线性代数', teacher: '周老师', classroom: 'D102' },
    { time: '14:00-15:40', course: '概率论', teacher: '吴老师', classroom: 'D201' }
  ],
  '物理2004': [
    { time: '16:00-17:40', course: '实验物理', teacher: '王雪', classroom: 'E201' }
  ],
};

const mockStudentData = {
  '24级计算机网络技术二班': Array.from({ length: 45 }, (_, i) => ({
    studentId: `2020${String(i+1).padStart(3, '0')}`,
    name: `学生${i+1}`,
    gender: i % 2 === 0 ? '男' : '女',
    phone: `138${String(Math.floor(10000000 + Math.random() * 90000000)).slice(0, 8)}`
  })),
  '数学2003': Array.from({ length: 28 }, (_, i) => ({
    studentId: `2020${String(i+1).padStart(3, '0')}`,
    name: `学生${i+1}`,
    gender: i % 2 === 0 ? '男' : '女',
    phone: `138${String(Math.floor(10000000 + Math.random() * 90000000)).slice(0, 8)}`
  })),
  '物理2004': Array.from({ length: 36 }, (_, i) => ({
    studentId: `2020${String(i+1).padStart(3, '0')}`,
    name: `学生${i+1}`,
    gender: i % 2 === 0 ? '男' : '女',
    phone: `138${String(Math.floor(10000000 + Math.random() * 90000000)).slice(0, 8)}`
  })),
  '化学2005': Array.from({ length: 40 }, (_, i) => ({
    studentId: `2020${String(i+1).padStart(3, '0')}`,
    name: `学生${i+1}`,
    gender: i % 2 === 0 ? '男' : '女',
    phone: `138${String(Math.floor(10000000 + Math.random() * 90000000)).slice(0, 8)}`
  }))
};

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    classData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      scheduleColumns,
      studentColumns,
      scheduleData: [],
      studentData: []
    };
  },
  watch: {
    classData: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.className) {
          this.scheduleData = mockScheduleData[newVal.className] || [];
          this.studentData = mockStudentData[newVal.className] || [];
        }
      }
    }
  },
  methods: {
    getStatusColor(status) {
      const colorMap = {
        '上午无课': 'orange',
        '全天无课': 'red',
        '正常': 'green'
      };
      return colorMap[status] || 'blue';
    },
    handleClose() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.ant-descriptions-item {
  padding: 8px 12px;
}
.ant-divider {
  margin: 16px 0;
}
</style>